<template>
	<div style="display: inline;">
        <span class="rest-time" v-if="source == 'apply'"><em class="num">{{formatEndtime.day}}</em>天<em class="num">{{formatEndtime.hour}}</em>时<em class="num">{{formatEndtime.min}}</em>分</span>

        <div class="time-box" v-if="source == 'fightSuccess'" :style="{'color': themes.color}"><span class="time-item" :style="{'color': themes.color}">{{formatEndtime.hour}}</span>:<span class="time-item" :style="{'color': themes.color}">{{formatEndtime.min}}</span>:<span class="time-item" :style="{'color': themes.color}">{{formatEndtime.sec}}</span></div>

        <div class="des" v-if="source == 'orderDetail'" style="font-size: 12px;">剩余{{formatEndtime.day}}天{{formatEndtime.hour}}时{{formatEndtime.min}}分{{formatEndtime.sec}}秒{{text}}</div>


       
        <div class="counting-clock" v-if="source == 'Detail'">
            <span class="num" v-if="formatEndtime.day > 0">{{formatEndtime.day}}天</span> 
            <i  class="wxIcon" v-if="formatEndtime.day > 0">:</i> 
            <span  class="num" >{{formatEndtime.hour}}</span> 
            <i  class="wxIcon">:</i> 
            <span  class="num" >{{formatEndtime.min}}</span> 
            <i  class="wxIcon">:</i> 
            <span  class="num">{{formatEndtime.sec}}</span>
        </div>


        <div class="rest-time" v-if="source == 'detailList'" >剩<span class="time" :style="{'color': themes.color}">{{formatEndtime.min}}:{{formatEndtime.sec}}</span>结束 </div>
        
    </div>
    
</template>

<script>
import {mapState} from 'vuex'
export default {
    props: {
        source: {
            type: String   //来源，  detail（普通，拼团） apply（售后）    detailList(开团的)
        },
        text: {
           type:  String   
        },
        //结束时间
        endTime: {
            //结束时间
            type: [String,Number]
        },
        endcallback: {
            //时间为0时的回调函数
            type: Function
        }
    },
	data() {
		return {
            timer: null,
            formatEndtime: {}
        };
    },
    mounted() {
        this.countTime(this.endTime)
    },
    methods: {

        countTime(timestamp) {
            let that = this
            this.timer = setInterval(() => {
                that.restTime(timestamp)
            }, 1000);
        },

        //时间为0时候触发的函数
        timeToEnd() {
            this.$emit("endcallback");
        },
        // 格式化时间
        restTime(timestamp) {
            //当前时间
            let nowTime = new Date();   
            //时间戳
            let t = timestamp - nowTime.getTime()


            if (t > 0) {
                let day = Math.floor(t / (86400000))
                let hour = Math.floor((t / 3600000) % 24)
                let min = Math.floor((t / 60000) % 60)
                let sec = Math.floor((t / 1000) % 60)

                hour = hour < 10 ? '0' + hour : hour
                min = min < 10 ? '0' + min : min
                sec = sec < 10 ? '0' + sec : sec

                if (day > 0) {
                    this.formatEndtime = {
                        day: day,
                        hour: hour,
                        min: min,
                        sec: sec
                    }
                }

                if (day < 0) {
                    this.formatEndtime = {
                        day: day,
                        hour: hour,
                        min: min,
                        sec: sec
                    }
                }

                if (day <= 0 && hour > 0) {
                    this.formatEndtime = {
                        day: day,
                        hour: hour,
                        min: min,
                        sec: sec
                    }
                }

                if (day <= 0 && hour <= 0) {
                    this.formatEndtime = {
                        day: day,
                        hour: hour,
                        min: min,
                        sec: sec
                    }
                }
            } else {
                this.formatEndtime = {
                    day: '00',
                    hour: '00',
                    min: '00',
                    sec: '00'
                }
                this.timeToEnd()
                clearInterval(this.timer)
                
            }
        }
    },
    destroyed() {
        clearInterval(this.timer)
    },
    computed: {
        ...mapState(['themes']),
    },
	components: {}
};
</script>

<style>
    @import "../../assets/css/style/detail-style.css";
    @import "../../assets/css/detail.css";
    @import "../../assets/css/fight.css";
    @import "../../assets/css/style/list-style.css";
</style>
